<template>
<div class="max">
        <div class="lunbo">
            <van-swipe :autoplay="3000" lazy-render>
                <van-swipe-item v-for="item in images" :key="item.name">
                    <img :src="item.img"  @click="$router.push('/shopdetails')"/>
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="fen">
            <van-swipe class="my-swipe" indicator-color="orange">
                <van-swipe-item>
                    <div class="eyes" v-for="item in name" :key="item">
                        <p>
                            <img :src="eye">
                        </p>
                        <p @click="$router.push('/category')">{{item}}</p>
                    </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="eyes" v-for="item in name2" :key="item">
                        <p v-if="item=='全部分类'">
                            <router-link to="/category"><img :src="other" @click="cates"></router-link >
                        </p>
                        <p v-else>
                            <img :src="eye">
                        </p>
                        <p>{{item}}</p>
                    </div>
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>
<van-popup 
    v-model:show="show"

    position="buttom"
    >
    <div class="yhj">
        <p><span class="yhj-1">新人专享福利</span></p>
        <p><span class="yhj-2">享受变美的乐趣</span></p>
        
        <div class="y1">
            <!-- <div class="by1"></div>
            <div class="by2"></div> -->
            <div style="width:48%;float:left">
                <span class="s1">￥</span>
                <span class="s2">50</span>
            </div>
            <div style="width:48%;float:left;height:100%">
                <div class="s3" style=" ">无门槛优惠券</div>
                
                <div class="s4" style=" ">新人全场通用</div>
            </div>
        </div>
        
        <p>
            <button class="yhj-btn">立即使用</button>
        </p>
        <p><span class="yhj-3">领取后4天内有效</span></p>
        <!-- <p>
            <router-link to="chat">
            <span>转聊天</span>
            </router-link>
            <router-link to="orderlist/fefunddetail">
            <span>转退款</span>
            </router-link>
        </p> -->
    </div>
</van-popup>



<div class="dijia">
    <div class="dj-1">
        <router-link to="/limit">
            <span>低价秒杀</span>
        </router-link>

        <router-link to="/limit">
            <button class="btn-ck">查看全部</button>
        </router-link>

    </div>
    <div class="dj-2">
        <router-link to="">
            <span>每天10点 限量秒杀</span>
        </router-link>

        <router-link to="">
            <van-count-down  :time="time" />
        </router-link>

    </div>
    <div class="dj-3">
        <div class="dj-3-1">
            <div class="dj-3-1-1" v-for='item in djarr' :key="item">
                <img :src="item.img" />
                <p><span class="djname">玻尿酸</span></p>
                <p><span class="djprice">￥199.0</span></p>
            </div>
        </div>
    </div>
</div>

<div class="wenzhang">
    <van-tabs v-model:active="active" shrink title-active-color='red' 
        line-width='0' >
        <van-tab v-for='item in wzarr' :key='item' :title='item.name' >

            <div class="wznr" v-for='item2 in wznrarr' :key='item2' >
                <div class="wznr-1">
                    <img class="wz-img1" :src="item2.img"/>
                </div>
                <div class="wznr-2">
                    <p><span>{{item2.name}}</span></p>
                    <p>
                        <img class="wz-img2" :src="item2.userimg"/>
                        <span class="zzname">{{item2.username}}</span>
                        <span class="dzs">{{item2.lovenum}}</span>
                        <img class="wz-img3"  src="src/assets/imgs/u1246.png" />
                    </p>
                </div>
            </div>
        </van-tab>
    </van-tabs>
</div>
</template>

<script setup lang='ts'>
    import { onMounted, ref,reactive } from 'vue';
    import axios from 'axios';

    const time = ref(4 * 60 * 60 * 1000);
        // return { time }
    let djarr:any = reactive([])
    const active = ref(0);
    let wzarr:any=reactive([])
    let wznrarr:any=reactive([])


        let show = ref(true);
let pic2=function(){
        axios.get('https://console-mock.apipost.cn/app/mock/project/81780a7d-4762-4605-af3a-0ffc09be0cca/homelimit')
        .then(res=>{
            res.data.data.forEach(item=>{
                djarr.push(item)
            })
            console.log(djarr)
        })
    }

let tjfl=function(){
        axios.get('https://console-mock.apipost.cn/app/mock/project/81780a7d-4762-4605-af3a-0ffc09be0cca/getrecommondcate')
        .then(res=>{
            res.data.data.forEach(item=>{
                wzarr.push(item)
            })
        })
    }
    let tjflcon=function(){
        axios.get('https://console-mock.apipost.cn/app/mock/project/81780a7d-4762-4605-af3a-0ffc09be0cca/getsomeDetail')
        .then(res=>{
            res.data.data.forEach(item=>{
                wznrarr.push(item)
            })
            console.log(wznrarr)
        })
    }
let images=reactive([])
let name=ref([
    '眼部','鼻部','脸部','唇部','脸部护理',
    '眼部','鼻部','脸部','唇部','脸部护理',
])
let name2=ref([
    '眼部','鼻部','脸部','唇部','脸部护理',
    '眼部','鼻部','脸部','唇部','全部分类',
])
let eye=ref('https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1412.png')
let other=ref('https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1456.png')
    let cates=function(){
    }
    let pic=function(){
        axios.get('https://console-mock.apipost.cn/app/mock/project/81780a7d-4762-4605-af3a-0ffc09be0cca/RotationImg')
        .then(res=>{
            res.data.data.forEach(item=>{
                images.push(item)
            })
            
        })
    }


    onMounted(()=>{
    pic()
    pic2()
    tjfl()
    tjflcon()
  })
</script>

<style scope>
.van-popup{top:15%;left: 12%;}
.van-popup__close-icon{position: absolute;top:15%}
.yhj{width: 300px;height: 300px;background: #ec7b67;text-align: center;color: white;}
.yhj-1{margin-bottom: 10px;margin-top: 20px;font-size: 30px;}
.yhj-2{margin-bottom: 30px;}
.yhj-3{font-size: 12px;}
.y1{width: 260px; height: 80px; background: white;line-height: 80px;
    margin-left: 7%;margin-top: 20px;}

.s1{color: #ec7b67;font-size: 24px;margin-left: 20px;font-weight: bolder;}
.s2{color: #ec7b67;font-size: 60px;font-weight: bolder;}
.s3{width: 90px; height: 20px;background: #ec7b67; color: white;font-size:12px;
    border-radius: 20px; margin-left: 15px;line-height: 20px;margin-top: 20px;}
.s4{color: #cccccc;line-height:20px;height: 20px; font-size: 12px;}
.yhj-btn{width: 260px; height: 40px; color: #ec7b67;border-radius: 20px;border: 0;
    background: white;margin-top: 10px;margin-bottom: 10px;}


.dijia{height: 220px; width: 95%;margin: 10px auto;}
.dj-1{height: 30; margin-bottom: 10px;box-sizing: border-box;}
.dj-1 span{font-size: 18px;}
.dj-1 button{border-radius: 20px;background: white;color: #999999;float: right;
border: 1px solid #999999;font-size: 14px;margin-top: 5px;}

.dj-2{height: 20px; margin-bottom: 10px;}
.dj-2 span{font-size: 12px; color: #999999; float: left;margin-right: 10%;}
.van-count-down{color: red;float: left;font-size: 12px;}

.dj-3{height: 150px;overflow: hidden;}
.dj-3-1{width: 300%;margin-top: 10px;}
.dj-3-1-1{float: left; margin-right: 1%;}
.dj-3-1-1 img{width: 70px; height: 70px;}
.djname{font-size: 14px;}
.djprice{font-size: 16px; font-weight: bolder;color: red;}

.wenzhang{background: #fbf9f6;}
.van-tabs__nav{background:#fbf9f6 ;}
.wznr{width: 43%; margin-left: 10px; margin-right: 10px;
        margin-top: 10px; float:left;}
.wz-img1 {width: 100%;height: 100%;}
.wz-img2{width: 25px; height: 25px; border-radius: 50%;}
.wz-img3{width: 20px; height: 20px;float: right;margin-bottom: 10px;}
.dzs{float: right;}

.wznr-1{height: 200px;margin-bottom: 8px;}
.wznr-2{height: 100px;}
.wznr-2 p{margin-bottom: 10px;}

 .eyes p:nth-child(1){
        width:50%;
        height: 35px;
        text-align: center;
        line-height: 35px;
        background: pink;
        border-radius: 100%;
        margin:20% auto 5px ;
        
    }
    .eyes{
        width:20%;
        height:40%;
        font-size: 12px;
    }
    .my-swipe .van-swipe-item {
        color: #000;
        height:100%;
        font-size: 20px;
        text-align: center;
        display:flex;
        flex-wrap: wrap;
    }
    .my-swipe{
        width: 100%;
        height:100%;
    }
    .fen{
        width: 90%;
        height: 200px;
        border: 1px solid #e6e6e6;
        margin: 20px auto;
    }
    .max{
        width:100%;
        height:100%;
    }
    .lunbo{
        width:90%;
        height:200px;
        margin:20px auto;
    }
    .lunbo img{
        width:100%;
        height:200px;
    }
</style>